import { useEffect, useState } from "react";
import { Descriptions } from "antd";
import "./index.less";
import { useTranslation } from "react-i18next";
import { BasicColumn, useTable } from "@/components/Table/index";
import Management from "./components/Management/index";
import { secondmentsDetails } from "@/api/SecondmentDictionary";
import { useLocation, useNavigate } from "react-router-dom";
import Toolbar from "@/components/ViewComponents/Toolbar";
const { Item } = Descriptions;
export default function referral_management_report() {
	const { t } = useTranslation();
	const navigate = useNavigate();
	const location: any = useLocation();
	let btnList = [
		{
			key: "back"
		}
	];
	const columns: BasicColumn[] = [
		{
			title: t("felix_ui.staff_id"),
			dataIndex: "staffId"
		},
		{
			title: t("felix_ui.full_name"),
			dataIndex: "staffName"
		},
		{
			title: t("kevin_ui.dateOfBirth"),
			dataIndex: "birthageday"
		},
		{
			title: t("kevin_ui.age"),
			dataIndex: "age"
		}
	];
	const equipmentsRespColumns: BasicColumn[] = [
		{
			title: t("felix_ui.staff_id"),
			dataIndex: "eqpId"
		},
		{
			title: t("felix_ui.full_name"),
			dataIndex: "eqpName"
		},
		{
			title: t("kevin_ui.version"),
			dataIndex: "genVno"
		},
		{
			title: t("kevin_ui.manufacturer"),
			dataIndex: "orgId"
		},
		{
			title: t("kevin_ui.dateOfManufacture"),
			dataIndex: "buyDtime"
		},
		{
			title: t("kevin_ui.scrapDate"),
			dataIndex: "expDtime"
		},
		{
			title: t("kevin_ui.purchaseDate"),
			dataIndex: "buyDtime"
		},
		{
			title: t("kevin_ui.unit"),
			dataIndex: "unitName"
		}
	];
	const techniqueRespColumns: BasicColumn[] = [
		{
			title: t("kevin_ui.technicalID"),
			dataIndex: "techId"
		},
		{
			title: t("kevin_ui.technicalName"),
			dataIndex: "techName"
		},
		{
			title: t("kevin_ui.technicalType"),
			dataIndex: "techType"
		},
		{
			title: t("kevin_ui.describe"),
			dataIndex: "description"
		}
	];

	const time = (time: any) => {
		if (!time) return;
		let str = "";
		time.forEach((item: any, index: number) => {
			if (index == time.length - 1) {
				str = str + item;
			} else {
				str = str + item + "-";
			}
		});
		return str;
	};
	const [details, setDetails] = useState<any>({});
	const [thStaffsRespTable] = useTable({
		dataSource: details.staffsResp,
		columns,
		isTreeTable: false,
		pagination: false,
		striped: false,
		useSearchForm: false,
		showTableSetting: false,
		showIndexColumn: true,
		canResize: false
	});
	const [equipmentsRespTable] = useTable({
		dataSource: details.equipments,
		columns: equipmentsRespColumns,
		isTreeTable: false,
		pagination: false,
		striped: false,
		useSearchForm: false,
		showTableSetting: false,
		showIndexColumn: true,
		canResize: false
	});
	const [techniqueRespTable] = useTable({
		dataSource: details.technique,
		columns: techniqueRespColumns,
		isTreeTable: false,
		pagination: false,
		striped: false,
		useSearchForm: false,
		showTableSetting: false,
		showIndexColumn: true,
		canResize: false
	});
	const handlerToolbarAction = (key: string) => {
		switch (key) {
			case "back":
				navigate(-1);
				break;
		}
	};
	const getDetails = async (ticketCode: string) => {
		const res = await secondmentsDetails({ ticketCode });
		setDetails(res);
	};
	useEffect(() => {
		if (location.state) {
			getDetails(location.state.ticketCode);
		}
	}, []);
	return (
		<div className="referral_management_report page">
			<div className="main">
				<div className="herder">
					<h3>Ⅰ、{t("kevin_ui.secondmentInformationInquiry")}</h3>
					<Descriptions bordered column={5}>
						<Item label={t("kevin_ui.startTime")}>{time(details.dateFrom)}</Item>
						<Item label={t("kevin_ui.endTime")}>{time(details.dateTo)}</Item>
						<Item label={t("kevin_ui.decisionTime")}>{time(details.decisionDate)}</Item>
						<Item label={t("kevin_ui.supportTime")}>{time(details.supportDate)}</Item>
						<Item label={t("kevin_ui.billNumber")}>{details.ticketCode}</Item>
						<Item label={t("kevin_ui.commentResults")}>{details.secdResults}</Item>
						<Item label={t("kevin_ui.mealAllowance")}>{details.mealAllowance}</Item>
						<Item label={t("kevin_ui.stay")}>{details.accommFee}</Item>
						<Item label={t("kevin_ui.carTravel")}>{details.secdExpense}</Item>
					</Descriptions>
				</div>
				<main>
					<div className="mainItem">
						<h3>Ⅱ、{t("kevin_ui.employeeQuery")}</h3>
						<Management registerTable={thStaffsRespTable}></Management>
					</div>
					<div className="mainItem">
						<h3>Ⅲ、{t("kevin_ui.technicalSupportQueryResults")}</h3>
						<Management registerTable={equipmentsRespTable}></Management>
					</div>
					<div className="mainItem">
						<h3>Ⅳ、{t("kevin_ui.technicalNameQueryResults")}</h3>
						<Management registerTable={techniqueRespTable}></Management>
					</div>
				</main>
			</div>
			<Toolbar action={handlerToolbarAction} btnList={btnList} />
		</div>
	);
}
